<template>
  <div class="m-breadcrumbs">
    <strong>当前位置：</strong>{{aBreads}}
    <!-- <router-link tag="span" to="/" @click.native="onPushHome">首页</router-link> -->
    <span v-for="(item, index) in aBreads" 
      :key="index" 
      :to="item.link" 
      v-text="item.name || item.title || item.twoMenuName || item.threeMenuName" 
      @click="onLink(item.link, index)">
    </span>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: {
    breads: {
      type: Array
    }
  },
  computed: {
    ...mapGetters(['aBreads'])
  },
  methods: {
    ...mapActions(['resetBreads']),
    onPushHome() {
      if (this.aBreads.length === 0) return
      this.resetBreads()
      this.$router.push('/')
    },
    // 面包屑跳转
    onLink(link, index) {
      // if (index !== this.aBreads.length - 1) {
      //   this.$router.push(link)
      // }
    }
  }
}
</script>

<style lang="scss">
  @import '../scss/_var.scss';
  .m-breadcrumbs {
    width: 100%;
    padding: 0 10px;
    background:rgba(242,242,242,1);
    border: 1px dashed #d7d7d7;
    height: 46px;
    line-height: 46px;
    font-size: 0;
    margin-bottom: 24px;
    strong {
      color: $color-gray-dark;
      font-size: 12px;
    }
    span {
      margin-left: 10px;
      cursor: pointer;
      font-size: 12px;
      &::after {
        content: ">";
        display: inline-block;
        margin-left: 10px;
      }
      &:last-of-type {
        cursor: text;
        color: $color-gray-dark;
      }
      &:last-of-type::after {
        display: none;
      }
    }
  }
</style>